<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="sidebar-container">
    <div class="sidebar">
      <div class="sidebar-content">
        <!-- 侧边栏内容 -->
        <div @click.prevent="showComponent('Cusually')">常用设备</div>
        <div @click.prevent="showComponent('Cphone')">手机</div>
        <div @click.prevent="showComponent('Cbook')">笔记本</div>
        <div @click.prevent="showComponent('Cusually')">平板</div>
        <div @click.prevent="showComponent('Cphone')">穿戴</div>
        <div @click.prevent="showComponent('Cbook')">智慧屏</div>
        <div @click.prevent="showComponent('Cusually')">门锁</div>
        <div @click.prevent="showComponent('Cphone')">汽车</div>
        <div @click.prevent="showComponent('Cbook')">眼镜</div>
      </div>
    </div>

    <!-- 根据当前选中的组件名称显示对应的组件 -->
    <div class="main-content">
      <component :is="selectedComponent"></component>
    </div>
  </div>
</template>

<script>
import Cusually from '@/components/Cusually'
import Cphone from '@/components/Cphone'
import Cbook from '@/components/Cbook'

export default {
  data () {
    return {
      selectedComponent: Cusually
    }
  },
  components: {
    Cusually,
    Cphone,
    Cbook
  },
  methods: {
    showComponent (componentName) {
      // 在这里处理点击链接的逻辑，例如改变样式或执行其他操作
      this.selectedComponent = this.$options.components[componentName] || null
    }
  }
}
</script>

<style scoped>
 .sidebar-container {
  display: flex;
  width: 450px;
}

.sidebar {
  width: 100px;
  height: 80vh;
  background-color: #f2f3f5;
  padding: 30px;
  transition: width 0.3s ease;
}

.sidebar-open {
  width: 200px; /* 收起侧边栏时，设置宽度为0 */
}

.sidebar-content {
  padding: 0px;
}

.sidebar-content div {
  margin-bottom:40px;
  cursor: pointer;
}

.sidebar-content div:hover {
  color: red;
}

.main-content {
  padding: 0px;
  height: 400px;
  width: 350px;
  margin-left: -30px;
}
</style>
